<template>
    <view class="packages">
        <view class="container">
            <view class="coupon">
                <view class="num"><text class="span">200</text></view>
                <view class="line"></view>
                <view class="info">
                    <view class="msg">优惠券内容优惠券内容优惠券内容优惠券内容优惠券内容优惠券内容优惠券内容优惠券内容优惠券内容优惠券内容优惠券内容优惠券内容</view>
                    <view class="card">706D6FD58F8E1S5Y58U</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script></script>

<style lang="less">
.packages {
    .container {
        position: absolute;
        top: 20%;
        left: 0;
        width: 100%;
    }

    .coupon {
        width: 600upx;
        margin: 0 auto;
        border-radius: 10upx;
        background-color: #F39B00;
        position: relative;
        height: 180upx;
        overflow: hidden;
    }

    .coupon .num {
        position: absolute;
        left: 0;
        width: 35%;
        text-align: center;
    }

    .coupon .num .span {
        color: red;
        .fs(80);
        font-weight: 400;
        line-height: 180upx;
    }

    .coupon .line {
        position: absolute;
        border: 4upx dashed #e8e8e8;
        height: 180upx;
        left: 36%;
    }

    .coupon .line::before,
    .coupon .line::after {
        content: '';
        position: absolute;
        width: 32upx;
        height: 16upx;
        background: #fff;
        left: -16upx;
    }

    .coupon .line::before {
        top: -4upx;
        border-radius: 0 0 32upx 32upx;
    }

    .coupon .line::after {
        bottom: 4upx;
        border-radius: 32upx 32upx 0 0;
    }

    .coupon .info {
        vertical-align: top;
        padding-left: 10upx;
        text-align: left;
        position: absolute;
        left: 36%;
        width: 55%;
        padding: 0 40upx;
        color: #fff;
    }

    .coupon .info .msg {
        max-height: 150upx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 20upx 0 15upx;
        .fs(30);
    }

    .coupon .info .card {
        .fs(26);
        text-align: center;
    }
}
</style>
